<template>
	<view>
		<simple-toolbar :title="$t('pool.drawMoney.drawMoney')">
			<view slot="content" class="mg-l-sm h-box">
				<el-radio v-model="status" label="pending">{{ $t('pool.status.pending') }}</el-radio>
				<el-radio v-model="status" label="completed">{{ $t('pool.status.completed') }}</el-radio>
				<el-radio v-model="status" label="cancelled">{{ $t('pool.status.cancelled') }}</el-radio>
				<el-radio v-model="status" label="rejected">{{ $t('pool.status.rejected') }}</el-radio>
			</view>
			<view class="update">
				<view class="button" @click="createDrawMoney">
					<image src="../../../static/create.png"></image>
					<text>{{ $t('pool.drawMoney.newDrawMoney') }}</text>
				</view>
			</view>
		</simple-toolbar>

		<view class="pad-base table">
			<nav-tab @change-current-tab="drawMoney" @ready="drawMoney" />
			
			<el-table :data="listData" style="width: 100%">
				<el-table-column align="center" prop="user" :label="$t('pool.drawMoney.id')"></el-table-column>
				<el-table-column align="center" prop="contract_num" :label="$t('pool.drawMoney.contract')"></el-table-column>
				<el-table-column align='center' prop="wallet" :label="$t('pool.walletPool.wallet')"></el-table-column>
				<el-table-column align="center" prop="amount" :label="$t('pool.drawMoney.amount')"></el-table-column>
				<el-table-column align='center' prop="coin_name" :label="$t('wallet.wallet.coin')"></el-table-column>
				<!-- <el-table-column align="center" prop="transaction_id" :label="$t('pool.drawMoney.transaction_id')"></el-table-column> -->
				<el-table-column align="center" :label="$t('pool.drawMoney.is_auto')">
					<template slot-scope="scope">
						<text>{{ scope.row.is_auto ? $t('pool.drawMoney.yes') : $t('pool.drawMoney.no') }}</text>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="status" :label="$t('pool.drawMoney.state')">
					<template slot-scope="scope">
						<view :class="scope.row.status" v-if="['cancelled', 'completed', 'rejected', 'Rejected'].indexOf(scope.row.status) !== -1">{{$t(statusDic[scope.row.status])}}</view>
						<el-dropdown v-else @command="handleCommand($event, scope.row)">
						  <span class="el-dropdown-link" :class="scope.row.status">
						    {{$t(statusDic[scope.row.status])}}<i class="el-icon-arrow-down el-icon--right"></i>
						  </span>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item command="pending" v-if="userInfo.user_type == 1 && scope.row.status != 'pending'">{{$t(actionDic['pending'])}}</el-dropdown-item>
						    <el-dropdown-item command="cancelled" v-if="userInfo.user_type != 1 && scope.row.status != 'cancelled'">{{$t(actionDic['cancelled'])}}</el-dropdown-item>
						    <el-dropdown-item command="completed" v-if="userInfo.user_type == 1 && scope.row.status != 'completed'">{{$t(actionDic['completed'])}}</el-dropdown-item>
						    <el-dropdown-item command="rejected" v-if="userInfo.user_type == 1 && scope.row.status != 'rejected'">{{$t(actionDic['rejected'] || actionDic['Rejected'])}}</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
		</view>
	</view>
</template>

<script>
	import {
		drawMoney
	} from "../../../js_sdk/uni-admin/assetPool.js"
	import {
		mapState
	} from "vuex"
	const statusDic = {
		'cancelled': 'pool.status.cancelled',
		'completed': 'pool.status.completed',
		'rejected': 'pool.status.rejected',
		'pending': 'pool.status.pending'
	}
	const actionDic = {
		'cancelled': 'pool.action.cancelled',
		'completed': 'pool.action.completed',
		'rejected': 'pool.action.rejected',
		'Rejected': 'pool.action.rejected'
	}
	export default {
		data() {
			return {
				cacheCurrentTab: {
					coin: 1
				},
				statusDic,
				actionDic,
				listData: [],
				status: 'pending'
			}
		},
		computed: {
			...mapState("user", ["userInfo"])
		},
		watch: {
			status() {
				this.drawMoney()
			}
		},
		methods: {
			async createDrawMoney() {
				try{
					await drawMoney('post')
					this.drawMoney()
				}catch(e){
					console.error(e)
				}
			},
			async drawMoney(data) {
				this.data = data
				let query = {}
				if (data) {
					query = data
					this.cacheCurrentTab = data
				} else {
					query = this.cacheCurrentTab
				}
				query.status = this.status
				let res = await drawMoney('get', query)
				this.listData = res.data
				this.listData.forEach(item => {
					item.amount = this.$utils.retain12(item.amount)
				})
			},
			async handleCommand(status, item) {
				try{
					let data = {
						id: item.id,
						status: status
					}
					let res = await drawMoney('put', data)
					this.drawMoney()
				}catch(e){
					//TODO handle the exception
				}
			}
		},
		onShow() {
			// this.drawMoney(this.data)
		}
	}
</script>

<style scoped>
	.cancelled {
		color: #3B3E66;
	}
	.completed {
		color: #12A234;
	}
	.rejected {
		color: #E02020;
	}
	.pending {
		color: #3B3E66;
	}
</style>
